// 6、隔代组件传递参数、props的chirend属性、props添加类型约束、props非空验证
// chirend属性：只要在父组件内的子组件标签之间写入内容，那么该子组件props就会有一个chirend属性
// chirend就是写入的内容，可用于渲染相当于vue中的插槽
// props数据校验需要安装npm i prop-types -D
import React, {Component} from 'react';
// 从context对象中结构出两个成员
import {Provider, Consumer} from "../../context";
// 导入PropTypes，用于控制porps类型
import PropTypes from "prop-types"
import './Six.css'


class Son4 extends Component {
    // 通过静态成员添加props的默认值
    static defaultProps = {
        message:'默认值',
        message1:'类组件props默认值'
    }
    render(){
        return (
            <div className="son4">
                <h3>{this.props.message}</h3>
                <h3>{this.props.message1}</h3>
            </div>
        )
    }
}

function Son3(props) {
    return (

        <div className='son3'>
            <h3>三级</h3>
            <p>一级父组件传递下来的参数：{props.message}</p>
            {/* 通过Consumers使用父级中提供的数据 */}
            <Consumer>
                {value => <div>{value}</div>}
            </Consumer>
        </div>
    )
}
// 设置Son2组件中props的数据类型
Son2.propTypes = {
    message: PropTypes.string,
    // isRequired表示必传属性
    cars:PropTypes.array.isRequired,
    // 特定结构对象，必须有name,age属性
    student : PropTypes.shape({
        name : PropTypes.string,
        age : PropTypes.number,
    })
}

// 如果给函数组件的props添加默认值
function Son2({cars,message='props默认值',student,children}) {
    // let { cars } = props
    // console.log(props)
    return (
        <div className='son2'>
            <h3>二级</h3>
            <Son3 message={message}></Son3>
            {/* children属性，返回的是组件标签之间的所有内容，类似于vue里面的插槽 */}
            {/*{props.children[0]}*/}
            {/*{props.children[1]}*/}
            {children}
            <ul>
                {
                   cars && cars.map(car =>{
                        return  <p key={car.no}>{`${car.no}${car.name}${car.color}`}</p>
                    })
                }
            </ul>
            <div>姓名：{student.name}，年龄：{student.age}</div>

        </div>
    )
}

class Six extends Component {
    state = {
        message: '一层一层传递',
        message2: '顶层通过Provider直接传递',
        cars: [{no: '苏A1001', name: '奔驰', color: '白色'},
            {no: '苏A1002', name: '宝马', color: '黑色'},
            {no: '苏A1003', name: '奥迪', color: '蓝色'}
        ],
        student:{
            name : '张三',
            age : 12
        }
    }

    render() {
        return (
            // 将最外面的父组件用Provider包裹起来，自定义一个value属性将提供的数据传进去
            <Provider value={this.state.message2}>
                <div className='six'>
                    <h2>Six</h2>
                    <h3>一级</h3>
                    <Son2 message={this.state.message} cars={this.state.cars} student={this.state.student}>
                        <h3>插槽children属性</h3>
                        <img style={{width: '150px'}} src="https://img2.baidu.com/it/u=1994380678,3283034272&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""/>
                    </Son2>

                    {/* 类组件 */}
                    <Son4 message={'向类组件传参'}></Son4>
                </div>
            </Provider>
        );
    }
}

export default Six;
